<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/explicit-function-return-type -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
let info = ref<any>({})
let updateStatus = ref<string>('')
let downloadProgress = ref<number>(0)

onMounted(() => {
  // 获取更新数据
  getUploadData()
  // 状态
  updateState()
})

// 获取更新数据
const getUploadData = () => {
  window.electron.ipcRenderer.invoke('update-info').then((data) => {
    info.value = data.info
  })
}

// 获取状态
const updateState = () => {
  window.electron.ipcRenderer.on('update-state', (_, data) => {
    updateStatus.value = data.status
    if (data.progress) downloadProgress.value = data.progress
  })
}

// 关闭当前窗口
const closeWindow = () => {
  window.electron.ipcRenderer.send('close-window')
}

// 下载更新
const downloadUpdate = () => {
  window.electron.ipcRenderer.send('download-update')
}


// 立即安装
const installUpdate = () => {
  window.electron.ipcRenderer.send('quit-and-install')
}

</script>

<template>
  <div>
    <div class="version-box">
      <el-text class="mx-1" size="large">最新版本：</el-text>
      <el-text class="mx-1" type="danger" size="large">v{{ info.version }}</el-text>
    </div>
    <el-text class="mx-1">更新内容：</el-text>
    <div class="content">{{ info.content }}</div>
    <div class="footer-bnt">
      <div class="b">
        <el-button type="danger" size="default" @click="closeWindow">关闭窗口</el-button>
      </div>
      <div class="b">
        <el-button
          v-if="updateStatus !== 'downloaded'"
          type="primary"
          size="default"
          @click="downloadProgress == 0 ? downloadUpdate() : ''"
        >
          下载更新
          <template v-if="updateStatus === 'downloading'"> {{ downloadProgress }}% </template>
        </el-button>
        <el-button
          v-if="updateStatus === 'downloaded'"
          type="primary"
          size="default"
          @click="installUpdate"
          >立即安装</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.version-box{
  display: flex;
  justify-content: center;
}
.content{
  padding-bottom: 60px;
  font-size: 14px;
  padding: 10px 0;
  white-space: pre-wrap;
  line-height: 20px;
}
.footer-bnt{
  height: 60px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  z-index: 99;
  .b{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .b:first-child{
    background-color: #fff;
  }
  .b:last-child{
    background-color: #eee;
  }
}
</style>
